<script setup>
import { ref,computed,watch,inject  } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
const props = defineProps({
    name:String
})
const model = defineModel()
const count = ref(1)
const count3 = ref(0)
const store = useCounterStore()
const {countPinia} = storeToRefs(store)
console.log(props.name);
const sonClick  = ()=>{
    console.log('被点击了');
}
const add = ()=>{
    count.value++
}
const count2  = computed(()=>{
    return count.value * 2
})
const countPa = inject('countPa')
watch(countPa,(newValue)=>{
    console.log(newValue);
})
watch(count,(newCount,oldCount)=>{
    console.log(newCount,oldCount,'watch');
    count3.value = newCount * 4
},{
    immediate:true
})
watch(model,(newValue)=>{
    console.log(newValue);
})
const handleEmit = defineEmits(null)
const emitFa =()=>{
    handleEmit('handle1')
}
defineExpose({
    sonClick
})
</script>

<template>
<div>hhha</div>
<input type="text" v-model="model">
<slot></slot>
<button @click="emitFa">触发父组件方法</button>
<div>
    <span>{{ count }}</span>
    <span style="margin-left: 10px;">{{ count2 }}</span>
    <span style="margin-left: 10px;">{{ count3 }}</span>
<button @click="add">点击+1</button>
<div style="margin-top: 20px;">
<slot name="name"></slot>
</div>
</div>
<p>
    <span>countPinia:</span>
    <span>{{ countPinia }}</span>
</p>
</template>
